﻿@model Category
@{
    Layout = "~/Areas/publishing/Views/Shared/_SiteLayout.cshtml";
    
    //var defaultCategory = WebSite.Open().DefaultCategory();
    //var cat = defaultCategory.Children().FirstOrDefault();
    var _defaultUrl = Model != null ? (!string.IsNullOrEmpty(Model.Url) ? Url.Content(Model.Url) : Url.Content("~/publishing/library/c/" + Model.ID.ToString() + ".html")) : "_blank";
}
<table style="width: 100%" id="readercontainer" cellspacing="0">
    <tr>
        <td id="dna_library_resizer" class="ui-border-left ui-corner-left" style="width: 350px; padding: 0px; background-color: #ffffff; border-right: 5px solid #cccccc;vertical-align:top;">
            <div class="ui-treeview-pane" style="overflow: auto; width: 350px; height: 700px;
                padding: 10px;">
                @(
                    Ajax.Dna().TreeView("LibTree")
                    .SinglePathExpand(true)
                    .Options(opts =>
                    {
                        opts.NodeSelectedCssClass = "";
                        opts.OnNodePopulate = (new System.Text.StringBuilder())
                            .Append("var $n = $(node);")
                            .Append("$n.addClass(\"d-treenode-loading\");")
                            .Append("var url = $(\">.d-treenode-content>a\", $n).attr(\"rel\");")
                            .Append("$(\"#LibTree\").dtree(\"loadNodes\", url, \"POST\", {}, $n);")
                            .Append("$n.removeClass(\"d-treenode-hasChildren\");")
                            .ToString();
                        opts.OnNodeLoaded = "if (node) { $(node).removeClass(\"d-treenode-loading\"); } ";
                    })
                    .ClientBind(Url.Action("GetNodes", "Library", new { Area = "Publishing", id = 0 }))
                    .ClientNodeTemplate(@<text>
                    <li {{if hasChildren}} class="d-treenode-hasChildren" {{/if}}>
                       <a href="${url}" {{if rel}} rel="${rel}" {{/if}} target="contentWindow">
                         <img src="${imgUrl}" class="d-treenode-img" alt="${title}" />
                         <span class="d-treenode-text">${title}</span>
                        </a>
                     </li>
                    </text>)
                    .GetHtml()
                )
            </div>
        </td>
        <td id="readerRightPane" style="background-color: #ffffff;vertical-align:top;">
            <iframe style="padding: 0px; margin: 0px; height: 722px;" frameborder="0" src="@_defaultUrl" width="100%" name="contentWindow" id="contentWidow"></iframe>
        </td>
    </tr>
</table>
@{
    Ajax.jQuery(".ui-treeview-pane", "resizable", new
    {
        handles = "e,w",
        animate = true,
        ghost = true,
        alsoResize = "#dna_library_resizer",
        helper = "ui-state-highlight",
        minWidth = 300
    });
}
<script type="text/javascript">
    function doResize() {
        $("body").height(window.innerHeight);
        $("#dna-kb-page").height($("body").height() - $("#dna-page-toolbox").outerHeight());
        $("#readercontainer").height($("#dna-kb-page").height() - $("#dna-page-header").height());
        $("#contentWidow").height($("#readerRightPane").height());
        $(".ui-treeview-pane").height($("#dna_library_resizer").height() - 22);
    }
    $(function () {
        doResize();
    });
        
</script>
